<template>
  <!-- 训练记录界面 -->
  <div class="body">
    <div >
      <Header title="训练记录" subtitle="第一期" />
    </div>
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange" v-for="(item) in trainingData " :key="item.id">
        <el-collapse-item title="" name="1">
          <template #title >
            <div class="collapse-title">
              <div class="collapse-date">{{ item.date }}</div>
              <div class="collapse-completed">完成训练：{{ item.completed }}次</div>
              <div class="collapse-duration">完成时长：{{ item.duration }}</div>
            </div>
          </template>
          <div collapse-item v-for="(itu,index) in item.content" :key="itu.id">
            <span class="title">我是有关的标题内容</span>
            <div class="collapse-content">
              <div class="collapse-number">{{index +1}}</div>
              <div class="collapse-icon">
                <img
                  src="@\assets\imgs\backImage.png"
                  alt="图标"
                  class="icon"
                />
              </div>
              <div class="collapse-textall">
                <div class="collapse-text">
                  <div>小猫钓鱼</div>
                  <div>
                    通过率：
                    <span>3</span>/<span>3</span>
                    <span style="margin-left:1vw">100%</span>
                  </div>
                  <div>时长： 108分钟</div>
                </div>
                <div style="display: flex; align-items: center">
                  <div v-for="(i,index) in item.content.correct" :key="index">
                    <img :src="greenImgSrc" alt="对" />
                  </div>
                  <!-- 渲染错误的图像 -->
                  <div v-for="(i,index) in item.content.error" :key="index">
                    <img :src="redImgSrc" alt="对red" />
                  </div>
                </div>
              </div>
              <div class="collapse-detail">
                <el-button
                  @click="openDialog()"
                  type="text"
                  style="color: rgb(255, 60, 0)"
                  >详情</el-button
                >
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>


    <div class="demo-collapse" v-if="userRole == 'admin'">
      <el-collapse v-model="activeNames" @change="handleChange" v-for="(item) in trainingData " :key="item.id">
        <el-collapse-item title="" name="1">
          <template #title >
            <div class="collapse-title">
              <div class="collapse-date">{{ item.date }}</div>
              <div class="collapse-completed">完成训练：{{ item.completed }}次</div>
              <div class="collapse-duration">完成时长：{{ item.duration }}</div>
            </div>
          </template>
          <div collapse-item v-for="(itu,index) in item.content" :key="itu.id">
            <span class="title">我是有关的标题内容</span>
            <div class="collapse-content">
              <div class="collapse-number">{{index +1}}</div>
              <div class="collapse-icon">
                <img
                  src="@\assets\imgs\backImage.png"
                  alt="图标"
                  class="icon"
                />
              </div>
              <div class="collapse-textall">
                <div class="collapse-text">
                  <div>小猫钓鱼</div>
                  <div>
                    通过率：
                    <span>3</span>/<span>3</span>
                    <span style="margin-left:1vw">100%</span>
                  </div>
                  <div>时长： 108分钟</div>
                </div>
                <div style="display: flex; align-items: center">
                  <div v-for="(i,index) in item.content.correct" :key="index">
                    <img :src="greenImgSrc" alt="对" />
                  </div>
                  <!-- 渲染错误的图像 -->
                  <div v-for="(i,index) in item.content.error" :key="index">
                    <img :src="redImgSrc" alt="对red" />
                  </div>
                </div>
              </div>
              <div class="collapse-detail">
                <el-button
                  @click="openDialog()"
                  type="text"
                  style="color: rgb(255, 60, 0)"
                  >详情</el-button
                >
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>


    <!-- 对话框 -->
    <div>
      <el-dialog v-model="DialogVisible" title="训练记录" width="900" center>
        <div style="padding: 0px 50px">
          <div
            class=""
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 20px;
              height: 60px;
            "
          >
            <div>2014-4-30 15:13:10</div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 20px;
              "
            >
              <div style="margin-left: 80px">100分</div>
              <div>独立完成</div>
            </div>
            <div style="margin-left: 80px">通过</div>
            <div>00:32</div>
          </div>
        </div>

        <div style="padding: 0px 50px">
          <div
            class=""
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 20px;
              height: 60px;
            "
          >
            <div>2014-4-30 15:13:10</div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 20px;
              "
            >
              <div style="margin-left: 80px">100分</div>
              <div>独立完成</div>
            </div>
            <div style="margin-left: 80px">通过</div>
            <div>00:32</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import Header from '@/components/titleHeader/TitleHeader.vue';
import { getProjectListApi } from "@/api/project.js"; // 导入 API 接口
import { getLaosListApi } from "@/api/project.js"; // 导入 API 接口
import { getJiaZListApi } from "@/api/project.js"; // 导入 API 接口
const userRole = localStorage.getItem("userRole");


const greenImgSrc = new URL("@/assets/imgs/对.png", import.meta.url).href; // 正确图像
const redImgSrc = new URL("@/assets/imgs/对red.png", import.meta.url).href; // 错误图像
const DialogVisible = ref(false);
// const activeNames = ["0"];
const openDialog = () => {
  DialogVisible.value = true;
};

const trainingData = ref([
  {
    id: '1',
    date: "2024-11-06",
    completed: 10,
    duration: "13:44",
    title: "我是有关的标题内容",
    content: [{
      id:"1",
      number: 1,
      correct: 2,
      error: 1,
      description: "小猫钓鱼",
      passRate: [15, 20], // 通过率的例子
      duration: "5分钟",
    },
    {
      id:"2",
      number: 1,
      correct: 2,
      error: 1,
      description: "小猫钓鱼",
      passRate: [15, 20], // 通过率的例子
      duration: "5分钟",
    }]
  },
    {
    id:'2',
    date: "2024-11-05",
    completed: 20,
    duration: "13:44",
    title: "我是有关的标题内容",
    content: [{
      id:1,
      number: 1,
      correct: 2,
      error: 14,
      description: "小猫钓鱼",
      passRate: [15, 20], // 通过率的例子
      duration: "5分钟",
    }],
  },
]);
const recordDetails = ref([
  {
    timestamp: "2014-4-30 15:13:10",
    score: "100分",
    completion: "独立完成",
    status: "通过",
    duration: "00:32",
  },
]);
</script>


<style  scoped>
.body {
  margin: 10px 20px;
}
.title {
  background-color: rgb(255, 60, 0);
}
.collapse-title {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px 170px;
}
.collapse-content {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* grid-template-rows: 100px 0px; */
}
.collapse-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
}
.collapse-icon {
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -20px;
  margin-right: 20px;
}
.icon {
  width: 100%;
  height: 100%;
}
.collapse-textall {
  grid-column-start: 3;
  grid-column-end: 9;
  grid-gap: 0px 70px;
}
.collapse-textall img {
  width: 20px;
}
.collapse-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
  height: 50px;
}
.collapse-detail {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>